昨天PO完文重看一下舊文才發現前天說要講json做輪播，結果昨天先講了tab….
希望今天能講完輪播…
先根據Day12的寫法寫出框架

<div id="content_box" v-for="(itrI, keyI, indexI) in itr" v-if="keyI!=0">
    <div class="intro_im">
        <div class="intro_carousel" v-for="(itrm, keym, indexm) in itrI.im">
            <img :src=" itrm " v-if="keym==cnt" alt="">
        </div>
        <div class="chevron">
            <a @click="prev()" v-if="itrI.im.length!=1">
                <i class="fas fa-chevron-left"></i>
            </a>
            <a @click="next()" v-if="itrI.im.length!=1">
                <i class="fas fa-chevron-right"></i>
            </a>
        </div>
    </div>
</div>

#content_box 的v-if="keyI!=0"的部分是因為我有幫各個標籤內多寫一個內容放置我需要給div用的ID名稱，該名稱放在第一個，若沒設置會被顯示，所以這邊把它隱藏了

左右按鈕的v-if="itrI.im.length!=1"的部分是因為如果只有一張圖就不需要做切換，所以設置讓程式自己判別需不需要用到切換按鈕

先在昨天寫的.intro_content_box這個class裡面加上放圖片的div跟左右點擊的div
我現在要寫的圖片，是包在json檔案的"tab標籤>介紹>圖片"中
這邊介紹一下我的一堆v-for

昨天的.intro_content_box包的v-for是包給三個tab標籤
裡面的.content_box包的v-for是包給介紹
再裡面的.intro_carousel包的v-for才是包給我現在要講的圖片

.intro_im是為了把圖片跟文字做分開，下面文字也會給他包個.intro_content

圖片的顯示方法是跟Day12的方法一樣，利用變數去控制圖片要顯現出哪一張
但因為現在我們一次顯示了多張圖片，如果還是用同一個變數去控制，便會發生點一個大家都動的情況發生

所以這邊我們需要利用陣列去一一控制
首先先在data新增一個陣列

data: {
    indexs: [0, 0, 0, 0, 0, 0, 0]
}

並根據json檔中的"介紹"的數量先放入相對應數量的0，給"介紹"做個別加減
然後在加減函式的地方也要做更動
在Day12中，我們只有一個圖片，而且我們的陣列是放在自己的data中可以直接在函式抓取
但現在我們有多個圖片，且陣列是來自本地json檔，無法直接抓取，所以我們需要在點擊呼叫函式時，告訴函式點擊的是誰，和陣列的長度

prev(i, l) {
    if (this.indexs[i] > 0) {
        this.indexs[i]--;
    } else this.indexs[i] = l - 1;
    this.indexs.push()
},
next(i, l) {
    if (this.indexs[i] < l - 1) {
        this.indexs[i]++;
    } else this.indexs[i] = 0
    this.indexs.push()
}

我這邊是設定成i跟l
i (index) 是代表該圖在哪個"介紹"中，需要對對應的第幾個indexs數值加減
l (length) 是代表該"介紹"有幾張圖
然後在加減@click時給予相對應的數值

<a @click="prev(keyI,itrI.im.length)" v-if="itrI.im.length!=1">
    <i class="fas fa-chevron-left"></i>
</a>
<a @click="next(keyI,itrI.im.length)" v-if="itrI.im.length!=1">
    <i class="fas fa-chevron-right"></i>
</a>

我在寫v-for時有用英文做標記
keyI的I是代表Intro介紹的第一個字母，這邊傳給函式的keyI便是代表這是第幾個介紹
itrI.im.length則是代表該介紹(itrI)中圖片(im)的長度(length)
大家在寫多個v-for時可以用一些命名去釐清各個關係，不然會混亂的

然後圖片呼叫的地方也要做改變

<img :src="itrm" v-if="keym==indexs[keyI]" alt="">

圖片判別顯示哪張需要更改成是否對應我們設定的陣列中該項的數值
這樣更改後，就能分開座左右變化了

然後用差不多的方法新增下面可以點擊個點點在.intro_im中

<div class="carousel-indicators" v-if="itrI.im.length!=1">
    <div class="carousel-dots" @click="imgchoose(keym,keyI)" v-for="(itrm, keym, indexm) in itrI.im" :class="{'dotschoose':indexs[keyI]==keym}">
    </div>
</div>

跟Day12的差別就是多一個給一個keyI讓函式判別是第幾個介紹要做改變

imgchoose(m, i) {
    this.indexs[i] = m;
    this.indexs.push();
}

不知道有沒有人發現就是我每次在陣列做出改變後，都會寫一段this.indexs.push();
我一開始在寫的時候無論數值怎麼改變，網頁上的東西都沒有變動，然後我發現，雖然後台數值做了變化，但因為網頁本身沒有偵測到所以沒有產生對應變化
所以需要加上this.indexs.push(); 這行，去告訴網頁我變動他了噢，然後他才會乖乖的做出改變
這邊不是很確定是不是我有寫錯什麼才導致必須多加一行程式碼…
如果有人發現我寫錯的地方歡迎告知…

然後還有data中indexs這個陣列我是有先放預設，因為我一直抓不到json中陣列的長度去做加入，不知道有沒有辦法可以在程式碼中去做預設不是我自己打的…

這邊把文字的部分也加進去
在.intro_im下面加入文字的部分

<div class="intro_content">
    <div class="intro_title">{{itrI.title}}</div>
    <div class="intro_text">
        <p v-if="itrI.BRT!=null">
            ➤{{itrI.BRT}}</p>
        <p v-if="itrI.address!=null">
            ➤{{itrI.address}}</p>
        <p v-if="itrI.time!=null">開放時間：</p>
        <p v-if="itrI.time!=null" v-html="itrI.time"></p>
        <p v-if="itrI.intro!=null" v-html="itrI.intro"></p>
    </div>
    <div class="intro_a" v-if="itrI.fb!=null">
        <a :href="itrI.fb" target="_blank" style="color: #000;">
            <i class="fas fa-globe fa-1x"></i>
        </a>
    </div>
    <div class="intro_mine" v-if="itrI.content!=null" v-html="itrI.content">
    </div>
</div>

我把三個tab中會用到的所有div都放在一起，並用是否有內文來判斷需不需要顯示那行字
比如說.intro_a是FOOD才會用到，其他兩個的json中都沒有fb這個內容

在div加上v-if="itrI.fb!=null"後，程式會自己判斷
如果fb==null便是不符合判別式，就不會顯示那行程式碼

今天先打到這邊，時間控制輪播的部分跟切換tab時indexs陣列的改動就明天一起講